{include file="public/header" /}
<link rel="stylesheet" href="/static/index/css/page/order.css">
<link rel="stylesheet" href="/static/index/css/page/my_order_details.css">
<body>
<div class="build-navbar"
     data-title="订单详情"
     data-transparent
     data-color="#fff"
     data-lcolor="#fff"
></div>
<div class="main p-30">
    <img src="/static/index/images/bg/bg_ddxqbjtop@2x.png" alt="" class="img-top"/>
    <div class="step-1 flex flex-col">
        <div class="status">{$info.friendlyText}</div>
        <!--        <div class="countdown">剩余支付时间：00:45:32</div>-->
    </div>

    <div class="card address flex items-center justify-between">
        <div>
            <div class="top flex items-center justify-start">
                <img src="/static/index/images/order/ic_qrdddiz@2x.png" alt="" class="icon">
                <span class="name">{$info.receiver}</span><span class="tel">{$info.receiver_tel}</span>
            </div>
            <div class="bottom line-2">
                {$info.p.title}{$info.c.title}{$info.d.title}{$info.t?$info.t.title:''}{$info.address_details}
            </div>
        </div>
    </div>

    <div class="card pro-container mt-30 p-30">
        {foreach name="info.productsField" item="vo"}
        <div class="pro-item flex items-start justify-between py-30">
            <img src="{$vo.icon}" alt="{$vo.title}" class="icon"/>
            <div class="major flex items-start flex-col flex-1">
                <div class="pro-title line-2">{$vo.title}</div>
                <div class="spec line-2">{$vo.spec}</div>
            </div>
            <div class="fund flex items-end flex-col">
                <div class="price front">{$vo.vip_price}</div>
                <div class="num">x{$vo.num}</div>
            </div>
        </div>
        {/foreach}

        <div class="layout-lr">
            <div class="item flex items-center justify-between pt-30">
                <div class="item-title">订单备注</div>
                <div class="value">
                    {$vo.remark?:'暂无'}
                </div>
            </div>
        </div>
    </div>

    <div class="card pro-container mt-30 p-30">
        <div class="layout-lr">
            <div class="item flex items-center justify-between ">
                <div class="item-title">商品总额</div>
                <div class="value front">
                    {$info.real_amount - $info.freight}
                </div>
            </div>
        </div>
        <div class="layout-lr">
            <div class="item flex items-center justify-between pt-30">
                <div class="item-title">总运费</div>
                <div class="value {if $info.freight > 0}front{/if}">
                    {$info.freight > 0 ? $info.freight : '包邮'}
                </div>
            </div>
        </div>
        <div class="layout-lr">
            <div class="item flex items-center justify-between pt-30">
                <div class="item-title">实付款</div>
                <div class="value front red">
                    {$info.real_amount}
                </div>
            </div>
        </div>
    </div>

    <div class="card pro-container mt-30 p-30 last-dom">
        <div class="layout-lr small">
            <div class="item flex items-center justify-start ">
                <div class="item-title">订单编号：</div>
                <div class="value">{$info.sn}</div>
            </div>
        </div>

        <?php $arr = ['create_time'=>'下单时间','pay_way'=>'支付方式','pay_time'=>'支付时间','post_time'=>'发货时间',
        'express_title'=>'快递公司','express_code' => '快递单号',
        'receipt_time'=>'收货时间'];?>

        {foreach name="$arr" key="key" item="vo"}
        <?php if(!empty($info[$key])){ ?>
        <div class="layout-lr small mt-30">
            <div class="item flex items-center justify-start ">
                <div class="item-title">{$vo}：</div>
                <div class="value"><?php echo $info[$key];?></div>
            </div>
        </div>
        <?php } ?>
        {/foreach}
    </div>


    {if $info.status == 1}
    <div class="order-footer flex items-center justify-end">
        <button class="small-btn small-border-gray-btn" data-type="clear" lay-click="edit">取消订单</button>
        <button class="small-btn small-border-btn" lay-event="jump" lay-url="{:url('order/payment')}?id={$info.id}">
            立即支付
        </button>
    </div>
    {elseif $info.status == 3}
    <div class="order-footer flex items-center justify-end">
        <button class="small-btn small-border-btn" data-type="receipt" lay-click="edit">确认收货</button>
    </div>
    {else}
    {/if}


</div>
</body>
{include file="public/footer"/}
<script>
    layui.use(['methods'], function () {
        var m = layui.methods, a = layui.jquery, ly = layui.layer,
            fun = {
                edit: function (type, msg) {
                    ly.confirm('是否' + msg + '？', {title: '请确认'}, function () {
                        return m.fetchPostThrottle('{:url("order/edit")}', {type: type, id: '{$info.id}'})
                    });
                }
            };
        m.event.click('edit', function (data, that) {
            return fun.edit(data.type, a(that).text());
        });
    });
</script>
</html>